<template>
    <div>
        <input type="checkbox" :checked="allState"  @click="changeState"/> 
        <span>已完成 {{allData.comTodoCount}} /全部 {{ allData.todoCount }}</span>

        <button class="" @click="clearTodo">清除已完成的任务</button>
    </div>
</template>

<script setup>
import { ref , watch, toRefs} from 'vue'
// 接收数据  全选的状态  已完成的数量   全部任务数量
let {allData} = defineProps(['allData'])
// 使用 toRefs 函数是 allState属性保持响应式,以实时显示父组件传递过来的状态
let {allState} = toRefs(allData, 'allState')
console.log("接收到的数据props", allState);

// 声明 自定义事件
let emit = defineEmits(['allSeclet', 'clearTodo'])

// 主动修改全选状态时触发
function changeState(e){
    // 将全选的状态传递给父组件
    console.log("全选的选中状态", e.target.checked);
    emit('allSeclet', e.target.checked)
}

function clearTodo(){
    // 通知父组件, 删除勾选的任务
    emit('clearTodo')
}

// 清除已勾选的数据

</script>

<style scoped>
button{
    margin-left: 50px;
}
</style>